<template>
	<!-- client-box-->
	<view class="client">
		<view class="client-body">
			<view class="body-backgroud"></view>
			<view class="body-box">
				<view v-for="item in countData.slice(0,1)" :key="item.text">
					<view>{{item.text}}</view>
					<view class="mbottom">
						{{item.value}}
					</view>
				</view>
				<view class="count-box">
					<view class="count-box-item" v-for="(item,index) in countData.slice(1,countData.length)"
						:key="index">
						<view>
							{{item.text}}
						</view>
						<view class="text">
							{{item.value}}
						</view>
					</view>

				</view>
			</view>

		</view>
		<view style="position: relative;z-index: 2;">
			<!-- 分段器 -->
			<view style="padding:0 50rpx 30rpx 50rpx">
				<u-subsection style="height: 76rpx;" keyName="title" mode="subsection" activeColor="#007aff"
					:list="list" :current="current" @change="changeCurrent"></u-subsection>
			</view>
			<!-- 组件 -->
			<view style="padding:0 50rpx">
				<CustomerOrRebate :class="currentComp?'table'+currentMap:null" :key="tableKey" ref="table"
					v-if="currentComp" :url="computeUrl"></CustomerOrRebate>
				<order :key="tableKey" ref="table" v-if="!currentComp"></order>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRebateCount
	} from '@/api'
	import CustomerOrRebate from './components/CustomerOrRebate.vue'
	import order from './components/order.vue'
	export default {
		onLoad() {
			this.getCount()
		},
		computed: {
			currentMap() {
				return this.current == 2 ? 1 : this.current
			},
			currentComp() {
				return this.current < 2
			},
			computeUrl() {
				const map = {
					0: 'workerdata/getRebateUserList',
					1: 'workerdata/getRebateCashList'
				}
				return map[this.current]
			}
		},
		components: {
			CustomerOrRebate,
			order
		},
		data() {
			return {
				countData: [],
				current: 0,
				tableKey: Math.random(),
				params: {
					type: 1
				},
				countMap: {
					0: [{
							title: '上月邀请(人)',
							key: 'a'
						},
						{
							title: '全部邀请(人)',
							key: 'a'
						}, {
							title: '全部返利(元)',
							key: 'a'
						},
					],
					1: [{
							title: '上月返利(元)',
							key: 'a'
						},
						{
							title: '本月返利(元)',
							key: 'a'
						}, {
							title: '绑定公众号人数',
							key: 'a'
						},
					]
				},
				list: [{
					title: '绑定公众号客户',
					type: '1'
				}, {
					title: '我的返利',
					type: '2'
				}, {
					title: '客户订单',
					type: '3'
				}, ]
			}
		},
		methods: {
			async getCount() {
				let {
					code,
					data: countData
				} = await getRebateCount(this.params)
				if (code === 1) {
					this.countData = countData
					await this.$nextTick()
					const table = this.$refs.table
					if (this.currentComp) {
						table.getTableHeight()
					}
					table.getData()

				}
			},
			async changeCurrent(current) {
				this.current = current
				this.params.type = ++current
				this.tableKey = Math.random()
				this.getCount()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.client {
		color: #888;

		&-body {
			margin: 0 auto;
			padding: 40rpx;
			font-size: 10px;

			.body-box {
				background: #fff;
				padding: 30rpx 0;
				border-radius: 10rpx;
				box-shadow: 2rpx 8rpx 6rpx 0px #ddd;
				text-align: center;
				position: relative;
				z-index: 2;

				.mbottom {
					font-size: 50px;
					color: #f00;
				}
			}

			.count-box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10px;

				&-item {
					width: 33.33%;
					font-size: 12px;

					.text {
						text-align: center;
						color: #007aff;
						font-size: 20px;
						margin-top: 5px;
					}
				}
			}

			.body-backgroud {
				width: 1280rpx;
				height: 1280rpx;
				background: #1B5BC5;
				border-radius: 50%;
				position: absolute;
				top: -980rpx;
				left: 50%;
				margin-left: -640rpx;
				z-index: 1
			}
		}

	}
</style>